<template>
	<view>
		<div class="box">
			<div class="name">{{orderInfo.name}}</div>
			<div class="info">
				<div>预约时间：<span>{{orderInfo.appointmenttime}}</span></div>
				<div>物品重量：<span>{{kgList[orderInfo.kg]}}</span></div>
			</div>
		</div>
		<div class="form">
			<div class="list">
				<span class="left">联系人</span>
				<span class="right">{{address_info.name}}</span>
			</div>
			<div class="list">
				<span class="left">联系电话</span>
				<span class="right">{{address_info.mobile}}</span>
			</div>
			<div class="list">
				<span class="left">上门地址</span>
				<span class="right">{{address_info.address}}{{address_info.detailed_address}}</span>
			</div>
			<div class="list">
				<span class="left">物品照片</span>
				<span class="right">
					<image :src="orderInfo.images" mode="widthFix"></image>
				</span>
			</div>
		</div>
		<div class="input">
			<input type="text" v-model="pay_price" placeholder="请输入垃圾运输费（不可回收）" v-if="authenticationinfo.type == 2" />
			<input type="text" v-model="garbage_price" placeholder="请输入回收品价值（可回收）"  v-if="authenticationinfo.type == 1" />
			<button @click="priceOrder">提交</button>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				orderInfo:{},
				address_info:{},
				pay_price:"",
				garbage_price:"",
				kgList:["0~10kg","10~50kg","50~100kg","100kg以上"],
				authenticationinfo:{}
			}
		},
		methods: {
			getDetail(id) {
				this.$post('release/releaseinfo', {
					id
				}, (res) => {
					this.orderInfo = res;
					this.address_info = res.address_info
				})
			},
			priceOrder() {
				if(!this.pay_price && !this.garbage_price){
					uni.showToast({title:"请输入回收员服务费或回收品价值！",icon:"none"});
					return
				}
				this.$post('recovery/releaseassessment', {
					id:this.id,
					pay_price:this.pay_price,
					garbage_price:this.garbage_price,
				}, (res) => {
					uni.showToast({
						title:"提交成功！",
					})
					uni.navigateBack({})
				})
			}
		},
		onLoad(option) {
			if (option.id) {
				this.id = option.id;
				this.getDetail(option.id)
			}
			this.authenticationinfo = uni.getStorageSync('authenticationinfo');
		},
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
		padding-bottom: 40rpx;
	}
	.box {
		width: 690rpx;
		margin: 30rpx;
		padding: 45rpx;
		background-color: #22BF8A;
		color: #FFFFFF;
		box-sizing: border-box;
		border-radius: 10rpx;
	}

	.box .name {
		font-size: 36rpx;
		margin-bottom: 45rpx;
		color: #FFFFFF;
	}

	.box .info {
		font-size: 26rpx;
		color: #FFFFFF;
	}
	.box .info view{
		color: #FFFFFF;
	}

	.box .info span {
		float: right;
		color: #FFFFFF;
	}

	.box .info>div:first-child {
		margin-bottom: 15rpx;
	}

	.form {
		width: 630rpx;
		margin: 30rpx auto;
		font-size: 30rpx;
		color: #333;
	}

	.form .list {
		padding: 40rpx 0;
		border-bottom: 1px solid #e5e5e5;
		font-size: 30rpx;
	}

	.form .list:last-child {
		border: none;
	}

	.form .list::after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
	}

	.form .list .right {
		float: right;
	}

	.form .list .right image {
		width: 200rpx;
		height: 200rpx;
	}

	.input {
		margin: 0 auto;
		width: 630rpx;
		margin-top: 40rpx;
	}

	.input input {
		width: 100%;
		height: 98rpx;
		line-height: 98rpx;
		background: #F3F3F3;
		border-radius: 8px;
		text-align: center;
		font-size: 34rpx;
		margin-bottom: 30rpx;
	}

	.input button {
		color: #FFFFFF;
		font-size: 34rpx;
		text-align: center;
		height: 98rpx;
		line-height: 98rpx;
		background: #22BF8A;
		border-radius: 8px;
	}
</style>
